<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('流程任务回退')" />
    <style type="text/css">
        .layui-form-label{padding: 5px 0px;width: 100px;}
        .layui-form-checkbox[lay-skin=primary] { padding-left: 22px}
        .layui-form-checkbox[lay-skin=primary] span {line-height: 15px}
    </style>
</head>
<body>
 <div class="layui-row" style="padding: 15px 15px;">
    <div class="layui-col-xs6">
        <div id="leftD" style="overflow: scroll;border:2px solid #ccc;text-align: center;">
            <img id="showImg" style="margin-top: 10px;">
        </div>
    </div>
    <form class="layui-form" id="form-task-back">
        <input type="hidden" id="taskId" name="taskId" th:value="${taskId}">
        <input type="hidden" id="tableDataId" name="tableDataId" th:value="${tableDataId}">
        <input type="hidden" id="optType" name="optType" value="back">
        <input type="hidden" id="activityId" name="activityId" value="">
        <div id="rightD" class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">任务主题：</label>
                <div class="layui-input-block">
                    <input type="text" id="taskName" autocomplete="off" class="layui-input  canntEdit" readonly th:value="${processTitle} +'－['+ ${taskName} +']'">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">紧迫程度：</label>
                <div class="layui-input-block">
                    <input type="radio" name="priority" value="1" title="一般" th:checked="${taskPriority == 1}">
                    <input type="radio" name="priority" value="2" title="重要" th:checked="${taskPriority == 2}">
                    <input type="radio" name="priority" value="3" title="紧急" th:checked="${taskPriority == 3}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">简短附言：</label>
                <div class="layui-input-block">
                    <textarea name="comment" id="comment" class="layui-textarea" placeholder="请输入内容，最多三百个字！" maxlength="300"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 0px;">
                <label class="layui-form-label">执行者：</label>
<!--                 <div class="layui-input-block"> -->
<!--                       <div style="float:right;margin-right:6px;"> -->
<!--                         <input type="checkbox" name="medium" title="邮件通知" lay-skin="primary" value="mail" style="margin:0px;"> -->
<!--                     </div> -->
<!--                 </div> -->
            </div>
            <div  style="padding-left: 15px;">
                <table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit="" lay-filter="btn_save" id="btn_save" value="提交">
        </div>
    </form>
</div>
 <th:block th:include="include :: footer" />
 <script th:inline="javascript">
    /*<![CDATA[*/
    var prefix = ctx + "flowable/process";
    var instanceId = [[${procInstId}]];
    var jumpUrl = [[${jumpUrl}]];
    var userInfoList = [[${userInfoList}]];
    var activityType = [[${activityType}]];
    var activityMulti = [[${activityMulti}]];
    /*]]>*/
 </script>
 <script type="text/html" id="barDh">
     {{# if(activityMulti == false){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-remove" lay-event="del">&nbsp;删除</a>
     {{# } }}
 </script>
 <script type="text/javascript">
    var listData=userInfoList?userInfoList:[];
    var $,layer,form,table,laydate,element,form,table;//定义layui模块
    layui.use(['layer','jquery','util','element','form','table'], function () {
        $ = layui.$,layer = layui.layer,util = layui.util,element=layui.element,form=layui.form,table=layui.table;
        var imgUrl =  prefix + '/getProcessImg/' + instanceId;
        $('#showImg').attr('src', imgUrl);
        $.tablelist.init({
            elem: '#dhtable'
            ,data: listData
            ,page:false
            ,limit:10000
            ,cols: [[
                {type:'numbers'},
                {field: 'userId',title: '员工编号',align:'center'},
                {field: 'userName',title: '员工姓名',align:'center'},
                {field: 'deptId',title: '部门编号',hide:true},
                {field: 'deptName',title: '所属部门',align:'center'},
                {title: '操作',templet:'#barDh',width:90,align:'center'}
            ]
            ]
            ,defaultToolbar:[]
            ,height:'full-295'
        });
        $('#leftD').height($('#rightD').height());
        //监听工具条
        table.on('tool(ftable)', function (obj) {
            var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
            switch(event){
                case "del":
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    listData=table.cache.dhtable;
                    for(var i=0; i < listData.length; i++)if(!listData[i] || listData[i].length==0)listData.splice(i, 1);//删除一项
                    table.reload('dhtable',{data : listData});
                    break;
            }
        });
    });
    //提交调用的方法
    function processTaskCallback() {
        if ($.validate.form()) {
            var data =  $.common.formToJSON('form-task-back');
            var tableData = table.cache.dhtable;
            if(activityType != "startEvent" && activityType != "endEvent" && tableData.length == 0){
                $.modal.alert("请选择上个环节执行者！", modal_status.FAIL);
            }else{
				var assignees = [];
				for (var i=0;i<tableData.length;i++){
					var rowData = tableData[i];
                    assignees.push(rowData.userId);
				}
				data.assignees = assignees.join(",");
				if(data.medium ==  null){
					data.medium = "";
				}
				return {'url':ctx + jumpUrl, 'data':data};
			}
        }
    }
</script>
</body>
</html>